<template>
	<view class="distraction_container">
		<view class="order_contant auto  top border radius10">
			<view class="border_bottom order_delivery_price ">
				商品佣金：<text>¥{{rebate}}</text>
			</view>
			<view class="display"  v-for="(item,index) in  orderdetails.goods" :key="index" :style="item===orderdetails.goods.length-1?'margin-bottom:20rpx;':'margin-bottom:20rpx;'">
				<image class="order_contant_img" :src="imgUrl+item.goods_image"></image>
				<view class="order_contant_info">
					<view class="order_contant_title ellipsis ellipsis_more_2">{{item.goods_name}}</view>
					<view class="order_contant_number">X{{item.goods_num}}</view>
					<view class="order_contant_money">¥{{item.goods_price}}</view>
				</view>
			</view>
			<view class="heji">
				共{{orderdetails.goods_num}}件商品 合计：<text>¥{{orderdetails.order_amount}}</text>
			</view>
		</view>

		<view class="order_contant   auto top border radius10" style="margin-bottom: 120rpx;">
			<view class="order_contant_details display align-items">
				<view class="order_contant_other_left">邮&nbsp;&nbsp;费</view>
				<view class="order_contant_other_center">￥{{orderdetails.postage}}</view>
			</view>
			<view class="order_contant_details display align-items">
				<view class="order_contant_other_left">订单编号</view>
				<view class="order_contant_other_center">{{orderdetails.order_sn}}</view>
				<image class="order_contant_other_right"  @tap.stop="copy(orderdetails.order_sn)" src="../../../static/icon/copy.png" mode=""></image>
			</view>
			<view class="order_contant_details display align-items" style="margin-bottom: 0;">
				<view class="order_contant_other_left">下单时间</view>
				<view class="order_contant_other_center">{{orderdetails.order_time}}</view>
			</view>
		</view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import isLogin from '../../../components/isLogin.vue'
	import checktime from '../../../util/formTime.js'
	export default {
		components: {
			isLogin
		},
		data() {
			return {
				isLogin: 1,
				orderdetails: {},
				id: '',
				rebate:11,
				imgUrl: ''
			}
		},
		onLoad(optains) {
			let that = this
			this.imgUrl = that.$imgUrl
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				var id = optains.id
				this.id = id
				this.getorderDetails()
			}
		},
		onPullDownRefresh() {
			uni.showToast({
				icon: 'loading',
				title: '加载中',
			});
			setTimeout(() => {
				this.getorderDetails(() => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			}, 1000)
		},
		methods: {
			// 获取订单详情
			getorderDetails(callback) {
				let that = this
				var id = that.id
				var data = {
					openid: uni.getStorageSync('openid'),
					id: id,
				}
				this.$myRequest.post(this.$api.distribution.getTeamOrderDetail, data).then(res => {
					if (res.code == '200') {
						that.rebate = res.data.rebate;
						that.orderdetails = res.data.data;
						that.orderdetails.order_time =checktime.changeTime(that.orderdetails.order_time);
						callback && callback();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			copy: function(value) {
				uni.setClipboardData({
					data: value, // 要复制的文字
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
			// 监听
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				this.getorderDetails()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		margin-top: 30rpx;
	}

	.heji {
		font-size: 28rpx;
		color: #333333;
		text-align: right;
		font-weight: bold;

		text {
			color: #F21515;
		}
	}

	.distraction_container {
		.order_contant {
			width: 650rpx;
			padding: 22rpx 20rpx 30rpx 20rpx;

			.order_delivery_price {
				padding-bottom: 20rpx;
				margin-bottom: 25rpx;
				font-size: 24rpx;
				text-align: right;

				text {
					font-size: 26rpx;
					color: #F21515;
				}
			}

			//配送
			.order_delivery_left {
				font-size: 24rpx;
				color: #666666;
				margin-left: 28rpx;

				text {
					margin-left: 40rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}

			.order_delivery_see {
				width: 116rpx;
				height: 34rpx;
				border: 1px solid #666666;
				border-radius: 17rpx;
				font-size: 20rpx;
				color: #666666;
				text-align: center;
			}

			//商品信息

			.order_contant_img {
				width: 156rpx;
				height: 156rpx;
			}

			.order_contant_info {
				width: 471rpx;
				margin-left: 21rpx;
				height: 65rpx;

				.order_contant_title {
					font-size: 26rpx;
					color: #333;
					height: 70rpx;
				}

				.order_contant_number {
					font-size: 25rpx;
					color: #666;
					text-align: right;
					margin-top: 18rpx;
				}

				.order_contant_money {
					font-size: 26rpx;
					color: #333;
					text-align: right;
					margin-top: 10rpx;
				}
			}

			// 數據信息
			.order_contant_details {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 28rpx;


			}

			.order_contant_des {
				padding-bottom: 28rpx;
			}

			.order_contant_details_money {
				text-align: right;
				font-size: 28rpx;
				color: #333;

				text {
					font-size: 28rpx;
					color: #F21515;
				}
			}

			// 订单信息
			.order_contant_other_left {
				font-size: 26rpx;
				color: #333;
				width: 120rpx;
			}

			.order_contant_other_center {
				font-size: 26rpx;
				color: #666666;
				padding: 0 16rpx 0 42rpx;
			}

			.order_contant_other_right {
				width:20rpx;
				height: 20rpx;
			}
		}
	}
</style>
